<template>
  <!--  回转分区的计算页面-->
  <div class="container">
    <div class="column column-left" v-show="!left_hidden">
      <!-- 左侧栏内容 -->
      <div class="column-left__image">
        <div>
          <RoyalImg></RoyalImg>
        </div>
      </div>

      <div class="column-left__modellist mt20">
        <div class="column-left__modellist__label">
          <span style="">模型选择：</span>
        </div>
        <el-dropdown popper-class="my-dropdown" split-button placement="top-start" trigger="click"
          style="align-items: center; height: 32px">
          <span style="
              width: 120px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            ">{{ this.selection }}</span>
          <template #dropdown>
            <el-dropdown-menu style="">
              <el-dropdown-item v-for="(model, index) in modelListData" :key="index" @click="handle(index)">
                {{ model.model_name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div class="column-left__modellist">
        <div class="column-left__modellist__label">
          <span style="">计算方式：</span>
        </div>
        <el-dropdown popper-class="my-dropdown" split-button placement="top-start" trigger="click" size="default"
          style="align-items: center; height: 32px" :disabled="selection === '请选择'">
          <span style="
              width: 120px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            ">{{ this.selectedCaculateType }}</span>
          <template #dropdown>
            <el-dropdown-menu style="">
              <el-dropdown-item v-for="(ca, index) in caculateType" :key="index" @click="handle1(index)">
                {{ ca.type_name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="column column-right">
      <div v-if="this.selection !== '请选择'" class="column-right__param">
        <form @submit.prevent="submitForm">
          <div class="form-row1" v-show="!JsonCaculate && this.selection !== '请选择'">
            <div v-for="(param, index) in modelListData[index1].model_ParaIntro" :key="index" class="form-row__item1">
              <label class="form-row__item__leftlabel1">{{
                param.param_name
              }}</label>
              <input class="form-row__item__input1" v-model="paramValues[this.index1][param.param_name]" type="text" />
              <label class="form-row__item__rightlabel1" v-if="param.param_unit !== ''">({{ sanitize(param.param_unit)
              }})</label>
              <label class="form-row__item__rightlabel1" v-else></label>
              <div style="display: flex">
                <el-popover placement="right" :width="auto" trigger="click">
                  <template #reference>
                    <img src="../../assets/page-calculate-icons/问号.png" />
                  </template>
                  {{ param.param_explain }}
                </el-popover>
              </div>
            </div>
          </div>
          <input id="upload" style="display: none" type="file" @change="handleFileUpload" accept=".json" />
          <div v-if="JsonCaculate" class="json-region">
            <span v-if="JsonCaculate && jsonFile === null">上传文件</span>
            <div v-show="this.JsonCaculate && this.selection !== '请选择'">
              <ul>
                <li v-for="item in jsonData" :key="item.id">{{ item }}</li>
              </ul>
            </div>
          </div>
          <div class="form-button mt20" v-if="selectedCaculateType === '多组计算'">
            <el-button class="mr20" @click="upload_example">上传Json示例</el-button>
            <label v-if="JsonCaculate" class="input-file-button" for="upload">
              上传文件
            </label>
            <el-select v-model="IsSave" placeholder="是否保存" @change="outputI">
              <el-option label="保存" value="Yes"></el-option>
              <el-option label="不保存" value="No"></el-option>
            </el-select>
            <!--            <el-button-->
            <!--                v-if="JsonCaculate && jsonFile !== null"-->
            <!--                @click="clearparaminput"-->
            <!--            >清空</el-button>-->
            <el-button v-if="JsonCaculate && jsonFile !== null" @click="load1">计算</el-button>
          </div>
          <div class="form-button" v-if="selectedCaculateType === '单组计算'">
            <el-select v-model="IsSave" placeholder="是否保存" @change="outputI">
              <el-option label="保存" value="Yes"></el-option>
              <el-option label="不保存" value="No"></el-option>
            </el-select>
            <el-button @click="submitinput">计算</el-button>
            <el-button @click="clearparaminput">清空</el-button>
          </div>
        </form>
      </div>
      <!--计算结果-->
      <div v-if="!waitFinished && submitResult" class="loading" id="loading-div">
        <label>正在计算中.............已等待{{ waitTime }}秒</label>
      </div>

      <div v-if="waitFinished && selectedCaculateType === '单组计算'" class="analyze_process mt50 ml20">
        <div class="totaltitle">
          <div class="blue-rectangle"></div>
          <h1>物质组成</h1>
        </div>
        <div class="ssp">
          <div v-if="Compose.data.judge === 'Yes'">
            <span class="MaterialComposition">溶液中铀浓度达到出料要求时溶解液中的物质有硝酸和硝酸酰铀，此时物质组成如下:
            </span>
            <Resolve_Table class="r_table" :Compose="Compose.data"></Resolve_Table>
          </div>
          <div v-else>
            <span>铀浓度没达到出料要求，不显示物质组成
            </span>
          </div>
        </div>
      </div>



      <keep-alive>
        <Resolve_Caculate :baseUrl="baseUrl" :IsSave="IsSave" :params="paramValues[index1]"
          v-if="waitFinished && selectedCaculateType === '单组计算'" :caculateResult="caculateResult"></Resolve_Caculate>
      </keep-alive>

      <div class="single-table1" v-if="waitFinished && selectedCaculateType === '多组计算'">
        <el-table v-if="this.jsonData" :data="VtableData" style="width: 100%" :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{ 'text-align': 'center' }">
          <el-table-column prop="attribute" label="Attribute"></el-table-column>
          <el-table-column prop="values" label="Values">
            <template #default="scope">
              <el-select v-if="!isSwitchOn[scope.row.attribute]" v-model="selectedValue[scope.row.attribute]">
                <el-option v-for="value in scope.row.values" :key="value" :label="value" :value="value"></el-option>
              </el-select>
              <el-label v-else>{{ scope.row.values.join(", ") }}</el-label>
            </template>
          </el-table-column>
          <el-table-column label="设置变量">
            <template #default="scope">
              <el-switch v-model="isSwitchOn[scope.row.attribute]" active-text="On" inactive-text="Off"
                @change="handleSwitchChange(scope.row.attribute)"></el-switch>
            </template>
          </el-table-column>
        </el-table>
        <el-button @click="validateData">显示结果</el-button>
      </div>


      <div v-if="show_map">

        <div class="analyze_process mt50 pb50">
          <div class="totaltitle">
            <div class="blue-rectangle"></div>
            <h1>物质组成</h1>
          </div>
          <div class="ssp">

            <k-tab @clickUpdata="clickUpdata" v-model="activeIndex" :Argument="Argument" :tabs-data="Legend" />

            <div class="ml20" v-if="resolve_compose">
              <div v-if="ComposeGroup[activeIndex].data.judge === 'Yes'">
                <span class="MaterialComposition">溶液中铀浓度达到出料要求时溶解液中的物质有硝酸和硝酸酰铀，此时物质组成如下:
                </span>
                <Resolve_Table class="r_table" :Compose="ComposeGroup[activeIndex].data"></Resolve_Table>
              </div>
              <div v-else>
                <span>铀浓度没达到出料要求，不显示物质组成
                </span>
              </div>
            </div>
          </div>
        </div>


        <Caculate_Groups v-if="show_map" :variable=nullKey :params=E_params :baseUrl="baseUrl"
          :ObjectId="totalResult.ObjectId" :IsSave="IsSave" :Legend="Legend" :Argument="Argument"
          :UrTo_standardTime="UrTo_standardTime" :Ur_generation="Ur_generation" :NOx_generation="NOx_generation"
          :Nitric_acid_concentration="Nitric_acid_concentration" :diffTempAcid="diffTempAcid"
          :diffTempUranium="diffTempUranium" />
      </div>
    </div>
  </div>
</template>

<script>
// import modelListData from "@/data1/modelListData";\\

import RoyalImg from "@/views/twojs/RoyalImg";
import Resolve_Caculate from "@/views/caculate_detail/Resolve_Caculate";
import Caculate_Groups from "@/views/caculate_detail/Caculate_Groups";
import Resolve_Table from "@/views/caculate_detail/Resolve_Table";
import KTab from "@/components/Tabs";
import tres from "@/data1/result2";
export default {
  name: "PageCalculate",
  components: { KTab, Resolve_Table, Resolve_Caculate, RoyalImg, Caculate_Groups },
  props: {
    isCollapse: Boolean,
    history_ParaIntro: {
      type: Object,
      default: function () {
        return {};
      },
    },
    baseUrl: {
      type: String,
    },
  },

  data() {
    return {
      nullKey: null,
      resolve_compose: true,
      activeIndex: 0,
      tabsData: [

      ],

      VtableData: [],
      grdata: tres,
      // 检验数据的变量
      validationResults: {
        switchNotOn: [],
        selectNotSelected: [],
      },

      selectedValue: {},
      selectedValue1: {
        aw: null,
        p: 0.5,
        t_one: 640,
        E: 7000,
        M: 900000,
        T: 360,
        V: 3000,
        c: 10,
        k: 75000000,
        n: 2,
        temp_list: 75,
        v_in: 20,
        c_in: 10,

      },
      isSwitchOn: {},
      show_map: false,
      Compose: {},
      ComposeGroup: [],
      Ur_generation: [],
      NOx_generation: [],
      Nitric_acid_concentration: [],
      diffTempAcid: [],
      diffTempUranium: [],
      UrTo_standardTime: [],
      waitFinished: false,
      errorText: "计算失败",
      waitTime: 0,
      caculateType: [{ type_name: "单组计算" }, { type_name: "多组计算" }],
      submitResult: false,
      modelListData: [],
      index1: 0,
      selection: "请选择",
      paramValues: [], // 保存表单的值
      hidden__button: "扩大",
      left_hidden: false,
      username: "",
      jsonData: [], // 存储解析后的 JSON 数据
      selectedJson: [],
      jsonFile: null,
      JsonCaculate: false,
      totalResult: [],
      caculateResult: {},
      IsSave: "No",
      selectedCaculateType: "单组计算",
      purposeNumber: [],
      id: "-1",
      Legend: [],
      Argument: "",
      E_params: {}

    };
  },
  created() { },
  mounted() {
    this.username = localStorage.getItem("username");

    this.request
      .post("/model/getMultiInfo", {
        username: this.username,
      })
      .then((res) => {
        if (res.code === 200) {
          console.log("getmultiinfo", res)
          this.modelListData = [];
          this.paramValues = [];
          this.modelListData = res.data;
          this.modelListData.forEach((model) => {
            let temp = {};
            model.model_ParaIntro.forEach((param) => {
              temp[param.param_name] = param.param_defaultValue;
            });
            this.paramValues.push(temp);
          });

          this.$nextTick(() => {
            if (Object.keys(this.history_ParaIntro).length > 0) {
              // props 不为空对象，执行相应的操作
              if (this.history_ParaIntro.paramValues) {
                this.modelListData.forEach((model, index) => {
                  if (model.model_name === this.history_ParaIntro.model_name) {
                    this.paramValues[index] =
                      this.history_ParaIntro.paramValues;
                    // console.log(index);
                    this.index1 = index;
                    this.selection = this.modelListData[index].model_name;
                  }
                });
              } else {
                this.modelListData.forEach((model, index) => {
                  if (model.model_name === this.history_ParaIntro.model_name) {
                    // this.paramValues[index]=this.history_ParaIntro.paramValues
                    // console.log(index);
                    this.index1 = index;
                    this.selection = this.modelListData[index].model_name;
                  }
                });
              }
            }
          });
        } else {
          this.$message.error(res.msg);
        }
      });
  },

  methods: {
    async upload_example() {

      await fetch(this.baseUrl + "/download/uploadJsonFile", {
        method: "POST",
        // body: formData,
      })
        .then((response) => response.blob())
        .then((blob) => {
          const url = URL.createObjectURL(blob);
          const link = document.createElement("a");
          link.href = url;
          // link.download = this.revolve_caculate_info_clone.id+"/"+dayjs().format('YYYY-MM-DD-HH:mm:ss')+ '.json';
          link.download = "上传Json示例文件" + ".json";

          link.click();
        })
        .catch((error) => {
          console.error("文件下载失败:", error);
        });
    },

    clickUpdata(index) {
      this.resolve_compose = false
      this.activeIndex = index
      this.$nextTick(() => {
        this.resolve_compose = true
        console.log('成分表已更新');
      });
    },
    outputI() {
      console.log(this.IsSave);
    },
    getSelectedValue() {

      const purposeNumber = [];
      this.Legend = [];
      //      遍历model_ParaKey数组
      for (let i = 0; i < this.totalResult.model_ParaKey.length; i++) {
        const modelPara = this.totalResult.model_ParaKey[i];
        let isMatch = true;
        this.nullKey = null;
        // 遍历selectedValue对象的属性
        for (const key in this.selectedValue) {
          if (this.selectedValue[key] === null) {
            this.nullKey = key
            this.Argument = key
            console.log("nullKey", this.nullKey)
          }
          if (
            this.selectedValue[key] !== null &&
            this.selectedValue[key] !== modelPara[key]
          ) {
            isMatch = false;
            break;
          }
        }
        // 如果所有属性匹配，则将序号保存到purposeNumber数组中
        if (isMatch) {
          purposeNumber.push(i);
          this.Legend.push(modelPara[this.nullKey])
        }
      }
      this.purposeNumber = purposeNumber;
      this.tabsData = purposeNumber;
      console.log('purposeNumber', purposeNumber);
    },
    validateData() {
      this.show_map = false;
      console.log("校验数据后的选择---------->");
      console.log(this.selectedValue);
      // console.log(this.isSwitchOn);
      // console.log("data_compChoose", this.selectedValue, this.VtableData, typeof(Object.keys(this.selectedValue).length), typeof(this.VtableData.length))
      // 首先检查长度是否相同
      if (Object.keys(this.selectedValue).length !== this.VtableData.length) {
        // 长度不相同，提示用户
        // console.log("length_compare",Object.keys(this.selectedValue).length,this.VtableData.length)
        alert("请保证一行开关打开，其余行下拉框被选定值");
      } else {
        let emptyCount = 0; // 记录空值的数量
        let nonEmptyCount = 0; // 记录非空值的数量
        for (const key in this.selectedValue) {
          if (this.selectedValue[key] === null) {
            console.log(key)
            // 如果某个值为空
            emptyCount++;
          } else {
            // 如果某个值非空
            console.log("have", key)
            nonEmptyCount++;
          }
        }
        console.log("emptycon", emptyCount, nonEmptyCount, this.VtableData.length)
        // 检查条件：要么没有空值，要么只有一个空值，否则提示用户
        if (emptyCount === 1 && nonEmptyCount === this.VtableData.length - 1) {
          // this.$emit("setSelectedValue",this.selectedValue)
          this.getSelectedValue();
          this.FilterLine();
          console.log("校验数据成功！！！！！！！！！！");
          setTimeout(() => {
            this.E_params = this.selectedValue
            for (let item in this.selectedValue) {
              if (this.selectedValue[item] === null) {
                this.nullKey = item
                console.log("重新赋值了nullKey", this.nullKey)
              }
            }

            if (this.nullKey != null) {
              this.E_params[this.nullKey] = this.jsonData.params[this.nullKey].param_value
            }

            console.log("this.E_params", this.E_params)

            // Object.keys(this.jsonData.params).map((key) => {
            //   this.E_params[key] = this.jsonData.params[key].param_value
            // })
          }, 300)
          setTimeout(() => {
            this.show_map = true;
          }, 500);
          // 符合条件，不需要提示用户
        } else {
          // 不符合条件，提示用户
          alert("请保证一行开关打开，其余行下拉框被选定值");
        }
      }
    },
    handleSwitchChange(attribute) {
      for (const key in this.isSwitchOn) {
        if (key !== attribute) {
          this.isSwitchOn[key] = false;
        }
      }

      if (this.isSwitchOn[attribute]) {
        this.selectedValue[attribute] = null;
      }
    },
    handleFileUpload(event) {
      console.log("上传的json:" + this.JsonCaculate);
      const file = event.target.files[0];
      this.jsonFile = file;
      // this.selectedJson.push(file)
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          try {
            // 解析 JSON 数据
            this.jsonData = JSON.parse(e.target.result);
            // this.$emit("setJson",this.jsonData)
          } catch (error) {
            console.error("解析 JSON 文件时出错：", error);
          }
        };
        reader.readAsText(file);
      }
    },
    handle1(item) {
      this.waitFinished = false
      this.submitResult = false
      this.selectedCaculateType = this.caculateType[item].type_name;
      if (this.selectedCaculateType === "单组计算") {
        this.JsonCaculate = false;
      }
      if (this.selectedCaculateType === "多组计算") {
        this.JsonCaculate = true;
      }
    },
    // 筛选显示
    FilterLine() {
      // this.show_map = true;
      this.NOx_generation = [];
      this.Nitric_acid_concentration = [];
      this.Ur_generation = [];
      this.diffTempAcid = [];
      this.diffTempUranium = [];
      this.UrTo_standardTime = [];
      this.ComposeGroup = [];
      // 遍历purposeNumber数组
      for (const index of this.purposeNumber) {
        const dataObject = this.totalResult.data[index];
        // 将数据添加到相应的数组中
        this.NOx_generation.push(dataObject.NOx_generation);
        this.Nitric_acid_concentration.push(
          dataObject.Nitric_acid_concentration,
        );
        this.Ur_generation.push(dataObject.Ur_generation);
        this.diffTempAcid.push(dataObject.diffTempAcid);
        this.diffTempUranium.push(dataObject.diffTempUranium);
        if (dataObject.UrTo_standardTime) {
          this.UrTo_standardTime.push(dataObject.UrTo_standardTime)
        }
        this.ComposeGroup.push(dataObject.Compose);

      }
      // // 输出结果
      // console.log("NOx_generation:", this.NOx_generation);
      // console.log("Nitric_acid_concentration:", this.Nitric_acid_concentration);
      // console.log("Ur_generation:", this.Ur_generation);
      // console.log("diffTempAcid:", this.diffTempAcid);
      // // console.log(JSON.stringify(this.diffTempAcid));
      // console.log("diffTempUranium:", this.diffTempUranium);
      // // console.log(JSON.stringify(this.diffTempUranium));
      // console.log("UrTo_standardTime:", this.UrTo_standardTime);
      // console.log("ComposeGroup：",this.ComposeGroup);

    },
    async load2() {
      this.submitResult = true;
      this.waitFinished = true;
      this.totalResult = this.grdata
      // this.totalResult = this.rdata;
      console.log("假数据为：");
      console.log(this.totalResult);
      this.VtableData = Object.keys(this.jsonData.params).map((key) => {
        return {
          attribute: key,
          values: this.jsonData.params[key].param_value,
        };
      });
      console.log("------------------------>打印VtableDta\n");
      console.log(this.VtableData);
    },
    async load1() {
      this.submitResult = true;
      this.waitFinished = false;
      // 等待页面加载完成
      this.startTimer();
      // this.VtableData = Object.keys(this.jsonData[0]).map((key) => {
      //   return {
      //     attribute: key,
      //     values: this.jsonData[0][key],
      //   };
      // });
      this.VtableData = Object.keys(this.jsonData.params).map((key) => {
        return {
          attribute: key,
          values: this.jsonData.params[key].param_value,
        };
      });

      // Object.keys(this.jsonData.params).map((key) => {
      //   this.E_params[key] = this.jsonData.params[key].param_value
      // })
      console.log("------------------------>打印VtableDta\n");
      console.log(this.VtableData, this.selection);
      const formData = new FormData();
      formData.append("model_name", this.selection)
      formData.append("file", this.jsonFile);
      formData.append("IsSave", this.IsSave);
      formData.append("username", this.username);
      // console.log("打印formdata\n");
      // formData.forEach ((value, key) => { console.log ( key, value); })
      var formDataToJson = {};
      formData.forEach((value, key) => {
        formDataToJson[key] = value;
      });
      var form2 = JSON.stringify(formDataToJson);
      console.log("上传JSON提交的表单");
      console.log(form2);
      if (this.selection === '回转分区基本模型') {
        try {
          const response = await fetch(this.baseUrl + "/cal/calCircle", {
            method: "POST",
            body: formData,
          });
          if (response.ok) {
            const result = await response.json();
            if (result.code === 200) {
              console.log("打印结果\n" + JSON.stringify(result));
              this.$message.success(result.msg);
              this.totalResult = result;
              console.log("Json上传计算得到的结果为：\n");
              console.log(this.totalResult);
              this.Compose = result.data.Compose
              this.waitFinished = true;
              this.file_path = result.file_path;
            } else {
              this.$message.error(result.msg);
            }
          } else {
            this.$message.error("上传失败");
          }
        } catch (error) {
          console.error("json计算失败", error);
          this.$message.error("json计算失败");
        }
      }
      else {
        try {
          const response = await fetch(this.baseUrl + "/cal/addModelCal", {
            method: "POST",
            body: formData,
          });
          if (response.ok) {
            const result = await response.json();
            if (result.code === 200) {
              console.log("打印结果\n" + JSON.stringify(result));
              this.$message.success(result.msg);
              this.totalResult = result;
              console.log("Json上传计算得到的结果为：\n");
              console.log(this.totalResult);
              this.Compose = result.data.Compose
              this.waitFinished = true;
              this.file_path = result.file_path;
            } else {
              this.$message.error(result.msg);
            }
          } else {
            this.$message.error("上传失败");
          }
        } catch (error) {
          console.error("json计算失败", error);
          this.$message.error("json计算失败");
        }
      }

    },
    checksubmit() {
      for (const param_name in this.paramValues[this.index1]) {
        if (this.paramValues[this.index1][param_name] === "") {
          this.$message.info("有参数值还没填写");
          return false;
        }
        return true;
      }
    },
    startTimer() {
      const interval = 1000; // 每隔1秒更新一次
      const maxWaitTime = 1200; // 最大等待时间为10秒
      let currentWaitTime = 0;

      const timer = setInterval(() => {
        if (this.waitFinished || currentWaitTime >= maxWaitTime) {
          clearInterval(timer);
        } else {
          currentWaitTime++;
          this.waitTime = currentWaitTime;
        }
      }, interval);
    },
    singleCaculate() {
      let form_ = this.paramValues[this.index1];
      form_.model_name = this.modelListData[this.index1].model_name;
      form_.username = this.username;
      form_.IsSave = this.IsSave;
      console.log("提交的表单为：" + JSON.stringify(form_));
      this.request.post("/cal/calCircle", form_).then((res) => {
        if (res.code === 200) {
          console.log("单一容器基本模型的计算结果");
          console.log(res);
          this.Compose = res.data.Compose
          this.caculateResult = res;
          // localStorage.setItem("calculate_HS_Id", res.ObjectId);
          this.id = res.ObjectId;
          this.waitFinished = true;
          this.file_path = res.file_path;
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    singleCaculate1() {
      let form_ = this.paramValues[this.index1];
      form_.model_name = this.modelListData[this.index1].model_name;
      form_.username = this.username;
      form_.IsSave = this.IsSave;
      console.log("提交的表单为：" + JSON.stringify(form_));
      this.request.post("/cal/calCircle", form_).then((res) => {
        if (res.code === 200) {
          console.log("单一容器基本模型的计算结果");
          console.log(res);
          this.Compose = res.data.Compose
          this.caculateResult = res;
          // localStorage.setItem("calculate_HS_Id", res.ObjectId);
          this.id = res.ObjectId;
          this.waitFinished = true;
          this.file_path = res.file_path;
          this.$message.success(res.msg);
        } else {
          // this.noResult = true
          this.$message.error(res.msg);
        }
      });
    },
    async addCaculate() {
      let form_ = this.paramValues[this.index1];
      // let form_ = {};
      form_.username = this.username;
      form_.IsSave = this.IsSave;
      form_.model_name = this.selection;
      this.request.post("/cal/addModelCal", form_).then((res) => {
        if (res.code === 200) {
          console.log("自定义模型的计算结果");
          // console.log(res);
          this.caculateResult = res;
          console.log("caculateResult", this.caculateResult);
          this.Compose = res.data.Compose

          localStorage.setItem("calculate_HR_Id", res.ObjectId);
          this.waitFinished = true;
          this.file_path = res.file_path;
          this.$message.success(res.msg);
        } else {
          this.noResult = true;
          this.$message.error(res.msg);
        }
      });
      console.log("输入的表单为&\n" + JSON.stringify(form_));
    },

    submitinput() {

      this.waitTime = 0;
      this.submitResult = true;
      this.waitFinished = false;
      // 等待页面加载完成
      this.startTimer();
      if (!this.checksubmit()) {
        return;
      }

      if (this.selection === "回转分区基本模型") {
        console.log("进行了回转分区基本模型计算");
        this.singleCaculate();
      } else {
        console.log("进行了自定义模型计算");
        this.addCaculate();
      }
      this.submitResult = true;
    },
    clearparaminput() {
      if (this.JsonCaculate) {
        this.jsonData = null;
        this.jsonFile = null;
        return;
      }
      for (const param_name in this.paramValues[this.index1]) {
        this.paramValues[this.index1][param_name] = "";
      }
    },
    handle(item) {
      this.index1 = item;
      this.selection = this.modelListData[item].model_name;
      this.waitTime = 0;
      this.waitFinished = false;
      this.IsSave = "Yes";
      this.paramValues[this.index1] = {};
      let temp = {};
      this.modelListData[this.index1].model_ParaIntro.forEach((param) => {
        temp[param.param_name] = param.param_defaultValue;
      });
      this.paramValues[this.index1] = temp;
    },
    sanitize(html) {
      const element = document.createElement("div");
      element.innerHTML = html;
      return element.innerText;
    },

  },
};
</script>

<style lang="scss" scoped>
.totaltitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.blue-rectangle {
  width: 10px;
  height: 30px;
  background-color: #409eff;
  margin-right: 10px;
}

.MaterialComposition {
  line-height: 50px;
}

.r_table {
  width: 50vw;
}

.el-select--big {
  width: 100px;
  //border: 1.2px solid #409eff;
  border-radius: 4px;
  height: 30px;
}

::v-deep(.el-input__wrapper input) {
  caret-color: transparent;
}
</style>
<style lang="scss" scoped>
.table1 {
  width: 50vw;
}

.loading {
  width: 100%;
  height: 100vh;
  background-color: rgb(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  /* 使用 Flexbox 布局 */
  width: 100%;
  /* 设置容器宽度 */
  //height: 100vh; /* 设置容器高度为视口高度，撑满整个屏幕 */
  overflow: hidden;
  /* 隐藏容器内容溢出的部分，不显示整体滚动条 */
  //height: 100vh; /* 设置容器高度为视口高度 */
}

.column {
  font-size: 14px;
  font-weight: 500;
  color: #606266;
}

.column-left {
  display: flex;
  flex-direction: column;
  width: 300px;
  /* 左侧栏固定宽度 */
  background-color: white;
  /* 左侧栏背景色 */
  height: 100%;
  overflow: auto;
  border-radius: 5px;

  font-size: 14px;
  font-weight: 500;
  color: #606266;
}

.column-right {
  flex: 1;
  /* 占用剩余空间 */
  background-color: white;
  /* 右侧栏背景色 */
  //height: 100vh;
  height: 100vh;
  max-height: 82vh;
  overflow: scroll;
  border-radius: 5px;
  //border: 1px solid #ccc; /* 添加轮廓样式 */
  border-left: 1px solid #dcdfe6;
}

.column-left__image {
  display: flex;
  //border-bottom: 1px solid  #DCDFE6;
  border-radius: 4px;

  div:last-child {

    //padding: 50px;
    >img {
      width: 200px;
      height: 200px;
    }
  }
}

.mt20 {
  margin-top: 20px;
}

.column-left__modellist {
  display: flex;
  flex-direction: row;
  justify-content: center;
  //align-items: center;
  /*border-radius: 0.938em;*/
  /*margin-left: 15px;*/
  height: 50px;
  box-sizing: border-box;

  //margin: 15px;
  .column-left__modellist__label {
    width: 80px;
    height: 32px;
    /*background-image: url('../assets/menubackground/background2.jpg');*/
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    //border: 1px solid #DCDFE6;
    background-color: white;
    margin-left: 5px;

    //margin-right: 2px;
    span {
      color: #606266;
      font-weight: 500;
      font-size: 14px;
    }
  }
}

.column-left__modellist__button {
  //position: absolute;
  //bottom: 1vh;
  //left: 0;
  background-color: white;
  width: 40px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  //margin-bottom: 10px;
}

.column-left__modellist__button:hover {
  cursor: pointer;
}

.column-right__param {
  border-radius: 4px;
  max-height: 100%;
}

//以下为没用的
.form-row {
  border-bottom: 2px dashed #dcdfe6;
  border-radius: 4px;
  padding-bottom: 10px;
  margin: 10px;
  display: flex;
  flex-direction: column;

  div {
    display: flex;
    flex-direction: row;
    margin-top: 15px;
  }

  /* 自定义输入框在聚焦时的样式 */
  input:focus {
    border-color: #409eff;
    /* 自定义边框颜色为蓝色 */
    background-color: white;
    outline: none;
    /* 去除默认的聚焦外边框 */
  }
}

.form-row1 {
  border-bottom: 2px dashed #dcdfe6;
  border-radius: 4px;
  padding-bottom: 10px;
  margin: 10px;
  display: flex;
  flex-wrap: wrap;

  div {
    display: flex;
    flex-direction: row;
    margin-top: 15px;
  }

  /* 自定义输入框在聚焦时的样式 */
  input:focus {
    border-color: #409eff;
    /* 自定义边框颜色为蓝色 */
    background-color: white;
    outline: none;
    /* 去除默认的聚焦外边框 */
  }
}

.form-row__item {
  display: flex;
  flex-direction: column;
  align-items: center;

  div {
    margin-left: 20px;

    img {
      width: 20px;
      height: 20px;
    }

    img:hover {
      cursor: pointer;
    }
  }
}

.form-row__item1 {
  display: flex;
  flex-direction: row;
  align-items: center;

  div {
    img {
      width: 20px;
      height: 20px;
    }

    img:hover {
      cursor: pointer;
    }
  }

  flex: 0 0 calc(50% - 20px);
  /* 50% width with margin */
  //margin: 8px;
}

.form-row__item__leftlabel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  //margin-right: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-row__item__leftlabel1 {
  display: flex;
  align-items: center;
  justify-content: right;
  width: 80px;
  margin-right: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-row__item__rightlabel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  //margin-left: 5px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-row__item__rightlabel1 {
  display: flex;
  align-items: center;
  justify-content: left;
  width: 80px;
  margin-left: 5px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-row__item__input {
  margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
  height: 30px;
  border-radius: 4px;
  padding-left: 10px;
  border: 1.5px solid #dcdfe6;
  //text-align: center;
}

.form-row__item__input1 {
  width: 130px;
  margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  border-radius: 4px;
  padding-left: 10px;
  border: 1.5px solid #dcdfe6;
  //text-align: center;
}

.form-button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  //padding: 10px;
  div {
    display: flex;
    //margin-top: 15px;
    //margin-bottom:  15px;
    margin-right: 12px;

    >button {
      //box-sizing: content-box;
      border: 1.2px solid #409eff;
      border-radius: 4px;
      width: 80px;
      height: 30px;
    }
  }

  >button {
    //box-sizing: content-box;
    border: 1.2px solid #409eff;
    border-radius: 4px;
    padding: 0 15px;
    margin-top: 15px;
    margin-bottom: 15px;
  }

  input {
    border: 1.2px solid #409eff;
    background-color: white;
    border-radius: 4px;
    width: 80px;
    height: 30px;
    //margin-top: 15px;
    //margin-bottom:  15px;
  }

  button:hover {
    cursor: pointer;
  }
}

.input-file-button {
  margin-right: 20px;
  padding: 5px 22px;
  background: #6EB6FF;
  border: 1px solid #12227A;
  border-radius: 4px;
  color: white;
  cursor: pointer;
}
</style>
<style>
/*el-dropdown my-dropdown类全局的下拉框的样式*/
.my-dropdown {
  max-height: 50vh;
  /* 设置最大高度 */
  height: 40vh;
  width: 260px;
  /* 设置自定义宽度 */
  /*overflow-y: auto; !* 如果内容溢出，添加滚动条 *!*/
  /*overflow-x: auto;*/
}
</style>
